/**
* 查看手册程序修订
 */
<template>
    <div class="p10">
        <el-tabs type="border-card" >
            <el-tab-pane :label="$t('tabs.basicInfo')">
                <template #label><vp-label zh="基本信息" en="Basic Info"/></template>
                <QualityManual :id="id"  type="view"  ref="manualRef" @formSubmited="getData" ></QualityManual>
            </el-tab-pane>
            <el-tab-pane v-if="formData.processid" :label="$t('tabs.processRecord')">
                <template #label><vp-label zh="流程记录" en="Process Record"/></template>
                <ProcessHistory :processInsId="formData.processid" />
            </el-tab-pane>
            <el-tab-pane v-if="formData.processid" :label="$t('tabs.processChart')">
                <template #label><vp-label zh="流程图" en="Process Chart"/></template>
                <ProcessView :processInsId="formData.processid"/>
            </el-tab-pane>
            <el-tab-pane :label="$t('tabs.operationRecord')">
                <template #label><vp-label zh="操作记录" en="Operation Record"/></template>
                <VpOperationRecordCard :id="formData.id" ref="rcListRef"></VpOperationRecordCard>
            </el-tab-pane>
        </el-tabs>
        <StatusBar :id="formData.id" :status="formData.zt" :isValid="1" />
    </div>
</template>

<script lang="ts" setup name="viewQualityManualRevision">
import { defineAsyncComponent, defineExpose, getCurrentInstance, ref } from 'vue';
import VpOperationRecordCard from '/@/components/vp/operationRecord/VpOperationRecordCard.vue';
import ProcessHistory from '/@/components/vp/workflow/ProcessHistory.vue';
import ProcessView from '/@/components/vp/workflow/ProcessView.vue';
import { useRoute } from 'vue-router';
import StatusBar from '/@/components/vp/status/StatusBar.vue';

const QualityManual = defineAsyncComponent(() => import('./QualityManual.vue'));
const ProcessHandle = defineAsyncComponent(() => import('/@/components/vp/workflow/VpProcessHandle.vue'));

const emits = defineEmits<{
    (e: 'formSubmited'): void
}>();

const props= defineProps<{ 
    id: String,
}>();

const manualRef = ref();
const formData = ref({
      id:"",
      processid: "",
  });

  const getData = (data: any) => {
      formData.value = data;
    };

defineExpose({
})
</script>
<style scoped lang="scss">

</style>
